<script lang="ts" setup>
import TitleCard from '@/components/titleCard.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock } from '@element-plus/icons-vue'
import { login } from '../api/index'
import type { FormInstance } from 'element-plus' // 引入FormInstance类型

const router = useRouter()

// 获取表单引用
const formRef = ref<FormInstance>()

// 表单数据
const formData = ref({
  username: '',
  password: ''
})

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
  ]
}

// 登录处理
const handleLogin = async () => {
  // 先进行表单校验
  if (!formRef.value) return
  
  try {
    await formRef.value.validate() // 等待表单校验完成
    
    // 校验通过后执行登录
    let res:any = await login(formData.value)
    if (res.token) {
        localStorage.setItem('token', res.token)
        router.push('/index')
    }
  } catch (error) {
    console.log('表单验证失败', error)
    // 这里可以添加错误提示，例如使用ElMessage
    // ElMessage.error('请正确填写表单')
  }
}

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields() // 使用表单的resetFields方法重置
}
</script>

<template>
  <div class="loginPage">
    <div class="loginBox">
      <div class="top">
        <TitleCard title="账号密码"></TitleCard>
      </div>
      <div class="form">
        <el-form 
          ref="formRef" 
          :model="formData" 
          :rules="rules" 
          label-position="top"
        >
          <el-form-item prop="username">
            <el-input v-model="formData.username" placeholder="请输入用户名" clearable>
              <template #prefix>
                <img  class="icon" src="@/assets/img/phone.png" alt="">
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input v-model="formData.password" placeholder="请输入密码" type="password" show-password>
              <template #prefix>
                <img class="icon" src="@/assets/img/password.png" alt="">
              </template>
            </el-input>
          </el-form-item>

          <div class="form-actions">
            <div @click="handleLogin" class="btn">登录</div>
            <div @click="resetForm" class="btn">重置</div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.loginPage {
  background: #08163d;
  height: 100vh;
  width: 100%;
  position: relative;

  .loginBox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 546px;
    min-height: 349px;
    background: #1d375c;
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    .top {
      width: 60%;
      margin-bottom: 24px;
    }

    .form {
      :deep(.el-input) {
        .el-input__wrapper {
          background-color: #ffffff; /* 修改为白色背景 */
          border: 1px solid #dcdfe6; /* 添加边框 */
          box-shadow: none; /* 移除默认阴影 */

          &:hover {
            border-color: #c0c4cc;
          }

          &.is-focus {
            border-color: #409eff;
            box-shadow: 0 0 0 1px #409eff;
          }
        }

        .el-input__inner {
          color: #333; /* 修改文字颜色为深色 */

          &::placeholder {
            color: #c0c4cc; /* 修改占位符颜色 */
          }
        }

        .el-input__prefix {
          color: #909399; /* 修改图标颜色 */
          margin-right: 8px;

          .el-icon {
            height: 100%;
            display: flex;
            align-items: center;
          }
        }
      }

      .form-actions {
        margin-top: 24px;
        .btn {
          text-align: center;
          width: 100%;
          background: #ffffff;
          border-radius: 6px 6px 6px 6px;
          padding: 14px 0;
          color: #000;
          cursor: pointer;
          transition: all 0.3s;
          
          &:hover {
            opacity: 0.9;
            transform: translateY(-2px);
          }
          
          &:active {
            transform: translateY(0);
          }

          &:last-child {
            margin-top: 20px;
            background-color: #08163d;
            color: #ffffff;
          }
        }
      }
    }
    .icon{
        width: 26px;
        height: 26px;
    }
  }
}
</style>